<template>
    <div style="color: #fff;">
        <div style="height: .8rem;"></div>
        <div class="top-bar">
            <router-link to="/community/topics">
                <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#ffffff" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#ffffff" p-id="2286"></path></svg>
            </router-link>
            <span>新闻</span>
            <img src="@/assets/images/操作.png" alt="">
        </div>
        <div class="newsbody">
            <h2>{{news.title}}<span v-if="news.id < 10">热榜前十</span></h2>
            <div v-for="section in news.sections" :key="section.id">
                <p v-if="section.type === 'text'">{{ section.content }}</p>
                <img v-if="section.type === 'image'" :src="section.src" :alt="section.alt">
            </div>
        </div>
        <CommentList :article-id="parseInt(this.id)" :parent="'news'"></CommentList>
    </div>
</template>

<script>

import CommentList from '@/components/pub/CommentList.vue'

export default {
    name: 'VueNewsDetail',
    props: ['id'],
    data() {
        return {
            news:{}
        };
    },
    components: {
        CommentList
    },
    created(){
        this.getNews()
    },

    mounted() {
        
    },

    methods: {
        getNews(){
            // 使用 API 或其他方式获取新闻详情
            this.news = {
                id: this.id,
                title: `News ${this.id} : 朵云艺展大美天地尼玛泽仁艺术成就展在朵云艺果馆成功举行`,
                sections: [
                    {
                        id: 1,
                        type: 'text',
                        content: `2020年8月28日(周六)上午10时，大美天地尼玛泽仁艺术成就展”于上海市南京东路422号朵云轩4楼展厅盛大开幕。`
                    },
                    {
                        id: 2,
                        type: 'image',
                        src: 'https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/leancloud-assets/950888aeffffed67a931.png~tplv-t2oaga2asx-zoom-crop-mark:1956:1956:1956:1101.image',
                        alt: 'Kitten'
                    },
                    {
                        id: 3,
                        type: 'text',
                        content: `此次画展由中国画学会提供学术支持，国家民族画院主办,中国水墨画院、中国文化艺术发展促进会水墨画专业委员会、上海长宁区东方收藏艺术馆协办,上海朵云轩文化经纪有限公司、上海东方收藏承办。展期为8月28日一8月30日,持续3天`
                    },
                    {
                        id: 4,
                        type: 'image',
                        src: 'https://img-blog.csdnimg.cn/img_convert/bbeecc6629bcdbc7242c352ce00957fe.png',
                        alt: 'Kitten'
                    },
                    {
                        id: 5,
                        type: 'text',
                        content: `此次画展由中国画学会提供学术支持，国家民族画院主办,中国水墨画院、中国文化艺术发展促进会水墨画专业委员会、上海长宁区东方收藏艺术馆协办,上海朵云轩文化经纪有限公司、上海东方收藏承办。展期为8月28日一8月30日,持续3天`
                    },
                    {
                        id: 6,
                        type: 'text',
                        content: `此次画展由中国画学会提供学术支持，国家民族画院主办,中国水墨画院、中国文化艺术发展促进会水墨画专业委员会、上海长宁区东方收藏艺术馆协办,上海朵云轩文化经纪有限公司、上海东方收藏承办。展期为8月28日一8月30日,持续3天`
                    },
                ]
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.top-bar{
    width: 7.5rem;
    background: #000000;
    position: fixed;
    top: .8rem;
    height: 1rem;
    padding: 0 .3rem;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    svg{
        transform: rotate(180deg);
        width: .5rem;
    }
    span{
        font-size: .34rem;
        font-weight: bold;
    }
    img{
        display: block;
        width: .4rem;
        transform: rotate(90deg);
    }
}
.newsbody{
    padding: 0 .3rem;
    h2{
        font-size: .34rem;
        font-weight: bold;
        letter-spacing: .01rem;
        line-height: .45rem;
        padding: .2rem 0;
        span{
            display: inline-block;
            border-radius: .08rem;
            background: #d97d2a;
            line-height: .40rem;
            padding: 0 .1rem;
            margin-left: .1rem;
        }
    }
    p{
        font-size: .28rem;
        letter-spacing: .01rem;
        line-height: .38rem;
        padding: .1rem 0;
    }
    img{
        display: block;
        max-width: 6.9rem;
        border-radius: .24rem;
        padding: .1rem 0;
    }
}
</style>